<template>
	<view class="move-view" :style="{
		height:h*0.55+'rpx',
		width:w*0.55+'rpx',
		'z-index':zIndex,
		transform:
		`translate(${translateX*0.55}rpx, ${translateY*0.55}rpx) rotate(${rotate_deg}deg) scale(${isOverturn?-1*scaleX:scaleX},${scaleY})`
	}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :class="{focus:focus}">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "move-view",
		props: {
			h: {
				// type: Number,
				default: 0
			},
			w: {
				// type: Number,
				default: 0
			},
			x: {
				// type: Number,
				default: 0
			},
			y: {
				// type: Number,
				default: 0
			},
			sx: {
				// type: Number,
				default: 1
			},

			sy: {
				// type: Number,
				default: 1
			},
			z: {
				default: 1,
			},
			rotate: {
				// type: Number,
				default: 1
			},
			focus: {
				type: Boolean,
				default: false
			},
			canScale: {
				type: Boolean,
				default: true
			},
			overturn: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				pixel: 750 / uni.getWindowInfo().screenWidth,
				isOverturn: this.overturn,
				translateX: this.x,
				translateY: this.y,
				zIndex: this.z,
				scaleX: this.sx,
				scaleY: this.sy,
				rotate_deg: this.rotate,
				distance: 0, // 双指接触点距离
				oldRotate: 0, // 上一次旋转停止后的角度
				oldDistance: 0,
				startMove: { // 起始位移距离
					x: 0,
					y: 0,
				},
				startTouches: [], // 起始点touch数组
				maxScale: 3,
				minScale: 0.1,
			};
		},
		watch: {
			x(newValue, oldValue) {
				this.translateX = newValue
			},
			y(newValue, oldValue) {
				this.translateY = newValue
			},
			sx(newValue, oldValue) {
				this.scaleX = newValue
			},
			sy(newValue, oldValue) {
				this.scaleY = newValue
			},
			z(newValue, oldValue) {
				this.zIndex = newValue
			},
			rotate(newValue, oldValue) {
				this.rotate_deg = newValue
			},
		},
		methods: {
			// 
			setOverturn() {
				this.isOverturn = !this.isOverturn
				this.sendChange()
			},
			touchStart(e) {
				if (!this.focus) return
				const touches = e.touches
				const translateX = this.translateX
				const translateY = this.translateY
				const {
					pageX,
					pageY
				} = touches[0]
				//pageX * this.pixel / 0.75 鼠标相对画布点的位置
				this.startMove = {
					x: pageX * this.pixel / 0.75 / 1.333 - translateX,
					y: pageY * this.pixel / 0.75 / 1.333 - translateY
				}
				this.startTouches = touches
				if (touches.length === 2) {
					const {
						pageX: twoPageX,
						pageY: twoPageY
					} = touches[1]
					this.distance = Math.sqrt((twoPageX - pageX) ** 2 + (twoPageY - pageY) ** 2)
				}
			},
			touchMove(e) {
				if (!this.focus) return
				const touches = e.touches
				const {
					pageX: onePageX,
					pageY: onePageY
				} = touches[0]
				const startMove = this.startMove
				const scaleX = this.scaleX
				const scaleY = this.scaleY
				// const distance = this.distance
				const oldDistance = this.distance
				const startTouches = this.startTouches
				const oldRotate = this.oldRotate
				// 双指操作

				if (touches.length === 2 && startTouches.length === 2) {
					const {
						pageX: twoPageX,
						pageY: twoPageY
					} = touches[1]
					const distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)

					this.distance = distance
					if (this.canScale) {
						this.scaleFun(distance, oldDistance)
					}
					if (e.canRotate) {
						this.rotateFun(touches, startTouches, oldRotate)
					}
				} else if (startTouches.length !== 2) {
					this.translateX = (onePageX * this.pixel / 0.75 / 1.333 - startMove.x)
					this.translateY = (onePageY * this.pixel / 0.75 / 1.333 - startMove.y)
				}
				this.sendChange()
			},
			// 缩放方法
			scaleFun(distance, oldDistance) {
				const maxScale = this.maxScale
				const minScale = this.minScale
				const scaleX = this.scaleX
				const scaleY = this.scaleY
				this.scaleX = scaleX * (distance / (oldDistance || distance))
				this.scaleY = scaleY * (distance / (oldDistance || distance))
				let s = scaleX * (distance / (oldDistance || distance))
				let s1 = scaleY * (distance / (oldDistance || distance))
				this.scaleX = s > maxScale ? maxScale : s < minScale ? minScale : s
				this.scaleY = s1 > maxScale ? maxScale : s < minScale ? minScale : s1
			},
			// 旋转方法
			rotateFun(touches, startTouches, oldRotate) {
				let rotate = this.getAngle(touches[0], touches[1]) - this.getAngle(startTouches[0], startTouches[
					1]) + oldRotate
				// 如果大于360度，就减去360
				rotate = rotate > 360 ? rotate - 360 : rotate
				this.rotate_deg = rotate
				return this.rotate_deg
			},
			getAngle(p1, p2) {
				const x = p1.pageX - p2.pageX
				const y = p1.pageY - p2.pageY
				return Math.atan2(y, x) * 180 / Math.PI
			},
			touchEnd() {
				if (!this.focus) return
				// 保存当前旋转角度
				this.oldRotate = this.rotate_deg

			},
			// 手动位移微调
			translate(x,y){
				this.translateX += x
				this.translateY += y
				this.sendChange()
			},
			sendChange() {
				this.$emit('change', {
					x: this.translateX,
					y: this.translateY,
					sx: this.scaleX,
					sy: this.scaleY,
					r: this.rotate_deg,
					overturn: this.isOverturn
				})
			}
		},
		mounted() {}
	}
</script>

<style lang="scss">
	.move-view {
		position: absolute;
		top: 0;
		left: 0;
		transition: 0.1;
		border: 1px solid transparent;
	}
</style>